import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import { TopAnchorsWrapper } from './style';
import ListHeader from '@/components/list-header';
import { shallowEqualApp, useAppSelector } from '@/store/hooks';
import { getImgOnSize } from '@/utils/format';
interface IProps {
  children?: ReactNode;
}

const TopAnchors: FC<IProps> = (props) => {
  const { anchors } = useAppSelector(
    (state) => ({
      anchors: state.recommended.topAnchors,
    }),
    shallowEqualApp
  );
  return (
    <TopAnchorsWrapper>
      <ListHeader name={'热门主播'} moreLink={''}></ListHeader>
      <div className="list">
        {anchors.map((anchor) => {
          return (
            <div className="content" key={anchor.id}>
              <div className="img">
                <img src={getImgOnSize(anchor.avatarUrl, 40)} alt="" />
              </div>
              <div className="info">
                <a href="">{anchor.nickName}</a>
                <p>{anchor.score}</p>
              </div>
            </div>
          );
        })}
      </div>
    </TopAnchorsWrapper>
  );
};

export default memo(TopAnchors);
